import { ColorPickerDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.ColorPicker);

## Usage

<Demo data={ColorPickerDemos.usage} />

## Color format

`ColorPicker` supports hex, hexa, rgb, rgba, hsl and hsla color formats.
Slider to change opacity and color preview are displayed only for hexa, rgba and hsla formats:

<Demo data={ColorPickerDemos.formatsConfigurator} />

## With swatches

You can add predefined color swatches with `swatches` prop:

<Demo data={ColorPickerDemos.swatches} />

By default, `ColorPicker` will display 7 swatches per row, you can configure it with `swatchesPerRow` prop:

<Demo data={ColorPickerDemos.swatchesConfigurator} />

To display swatches without picker set `withPicker={false}` and `fullWidth` props:

<Demo data={ColorPickerDemos.swatchesOnly} />

## Size

`ColorPicker` has 5 predefined sizes: `xs`, `sm`, `md`, `lg` and `xl`:

<Demo data={ColorPickerDemos.sizeConfigurator} />

## fullWidth

Set `fullWidth` prop to stretch component to 100% of parent width. In this case the picker will not
have fixed width, but you can still use `size` prop to control sizes of sliders.

<Demo data={ColorPickerDemos.fullWidth} />

<StylesApiSelectors component="ColorPicker" />

<Demo data={ColorPickerDemos.stylesApi} />

## HueSlider component

<Demo data={ColorPickerDemos.hueSlider} />

## AlphaSlider component

<Demo data={ColorPickerDemos.alphaSlider} />

## Accessibility

ColorPicker component is accessible by default:

- Saturation, hue and alpha sliders are focusable
- When moused is used to interact with the slider, focus is moved to the slider
- All values can be changed with arrows

To make component accessible for screen readers, set `saturationLabel`, `hueLabel` and `alphaLabel`:

```tsx
import { ColorPicker } from "@mantine/core";

function Demo() {
  return (
    <ColorPicker
      saturationLabel="Saturation"
      hueLabel="Hue"
      alphaLabel="Alpha"
    />
  );
}
```
